
<template>
  <!-- // 这是康复服务首页面 -->
  <div class="auton" style="margin-top: -50px">
    <!-- conenr开始 -->
    <div id="conenr">
      <!-- 图片开始 -->
      <!-- <div class="big-Picture">
        <div id="bigImg">
          <img src="@/assets/image/employment/doctor.jpg" alt="" />
        </div>
      </div> -->
      <div class="topImg">
        <div>
          <img
            src="https://static.cdpservice.com/image/banner/康复服务.jpg"
            alt=""
          />
        </div>
        <img
          src="https://static.cdpservice.com/image/banner/康复服务.jpg"
          alt=""
        />
      </div>
      <!-- 图片结束 -->
      <!-- 康复结束 -->
      <div style="width: 1200px; margin: 0 auto">
        <!-- 标签标题 -->
        <div class="dlex1-div" style="margin-top: 50px">
          <div class="navTitle" style="flex: 1">
            <p class="titleName">康复科普</p>
            <p class="titleenglish">REHABILITATION SCIENCE POPULARIZATION</p>
          </div>
          <div>
            <span
              class="smallPrint"
              style="color: #232d32"
              @click="goMallList(1)"
              >更多<img
                width="15"
                height="15"
                src="@/assets/image/mall.png"
                alt=""
            /></span>
          </div>
        </div>
        <!-- 康复类型 -->
        <div class="recoveryOF-n">
          <ul class="rehabiliPopulariList">
            <li
              class="wenzi listDiv"
              v-for="(item, index) in SpreadList"
              :key="index"
              @click="goDetail(item.sprNo, '科普')"
            >
              <div>
                <!-- <img :src="imageWebUrl+ " alt=""> -->
              </div>
              <div>
                <span class="txt5" :title="item.title">
                  {{ item.title }}
                </span>
                <div class="titleTxt6 multiline">
                  <span>{{ item.abstracts }}</span>
                </div>
                <span class="word17 lineSingle">来源：{{ item.source }}</span>
              </div>
            </li>
            <!-- <a-empty
              :image="imgUrl"
              :image-style="{
                height: '220px',
              }"
              style="margin: 100px auto"
              v-if="SpreadList.length == 0 && flag"
            /> -->
          </ul>
        </div>
      </div>
      <!-- 康复服务 -->

      <!-- 机构查询开始 -->
      <div class="mechanismQuery" style="padding: 50px 0">
        <div class="dlex1-div" style="margin-top: 50px">
          <div class="navTitle" style="flex: 1">
            <p class="titleName">
              机构查询 (<a class="blacktxt"
                >2021年全国残疾儿童康复救助定点服务机构信息
               </a
              >)
            </p>
            <p class="titleenglish">INSTITUTIONLL INQUIRY</p>
          </div>
          <div>
            <span
              class="smallPrint"
              style="color: #232d32"
              @click="goMallList(2)"
              >更多<img
                width="15"
                height="15"
                src="@/assets/image/mall.png"
                alt=""
            /></span>
          </div>
        </div>
        <!--
          <div class="m-Query">
          <a-layout>
            <a-layout>
              <a-layout-content style="background-color: #f8f8fa">
                <a-col :span="6" class="m-Query-a">
                  <a-dropdown>
                    <a-select
                      placeholder="选择省市"
                      style="width: 260px; height: 40px"
                      @change="handleChange"
                    >
                      <a-select-option
                        v-for="(item, index) in cityList"
                        :key="index"
                        :value="item.code"
                        >{{ item.name }}</a-select-option
                      >
                    </a-select>
                    <a-button class="button-Cs">
                      <a-col :span="6">选择省市</a-col>
                      <a-col :span="10">&nbsp;</a-col>
                      <a-col :span="8">
                        <a-icon type="down" />
                      </a-col>
                    </a-button>
                  </a-dropdown>
                </a-col>
                <a-col :span="6" class="m-Query-a">
                  <a-dropdown>
                    <a-select
                      placeholder="康复类型"
                      style="width: 260px; height: 40px"
                      @change="handleChange"
                    >
                      <a-select-option value="jack"> 康复类型 </a-select-option>
                      <a-select-option value="jack"> 康复类型 </a-select-option>
                    </a-select>

                    <a-button class="button-Cs">
                      <a-col :span="6">康复类型</a-col>
                      <a-col :span="10">&nbsp;</a-col>
                      <a-col :span="8">
                        <a-icon type="down" />
                      </a-col>
                    </a-button>
                  </a-dropdown>
                </a-col>
                <a-col :span="6" class="m-Query-a">
                  <a-input
                    style="width: 260px; height: 40px"
                    placeholder="康复项目"
                  />
                </a-col>
              </a-layout-content>
              <a-layout-sider style="background-color: #f8f8fa">
                <div class="m-Query-c">
                  <a-button
                    type="danger"
                    @click="getRecommedList"
                    block
                    style="height: 40px"
                  >
                    查询
                  </a-button>
                </div>
              </a-layout-sider>
            </a-layout>
          </a-layout>
        </div>
         -->
        <!-- 暂时的放个机构暂无 -->
        <!-- <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto"
          v-if="!(recommedList.list && recommedList.list.length)"
        /> -->
        <!-- 展示区域 -->
        <div class="coRsingleCF">
          <div
            class="listDiv1 listDiv"
            v-for="(item, list) in trainList"
            :key="list"
            @click="getJumptrainDetails(item.trainNo)"
          >
            <span class="titleTxt1 lineSingle"> {{ item.name }} </span>
            <div class="dlex2-div">
              <img src="@/assets/image/icon_contact.png" alt="" />
              <span :title="item.phone" class="lineSingle">{{
                item.phone
              }}</span>
            </div>
            <div class="dlex2-div">
              <img src="@/assets/image/icon_position.png" alt="" />
              <span :title="item.address" class="lineSingle">{{
                item.address
              }}</span>
            </div>
            <div class="dlex2-div">
              <img src="@/assets/image/icon_love.png" alt="" />
              <span :title="item.type" class="lineSingle">{{ item.type }}</span>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 68px auto"
            v-if="trainList.length < 1 && flag"
          />
        </div>
        <!-- mechanismQuery->mqImg
        <div class="mqImg" id="components-layout-demo-basic">
          <div
            class="swtdiv"
            :style="{ marginLeft: '-' + 1280 * swiperIndex + 'px' }"
          >
            大的，横过来的盒子，动的时候就是动他

             <div class="rSwdiv" v-for="(item, index) in dataList" :key="index">
              外层循环
              <div
                class="loop"
                v-for="(item, indexs) in recommedList.list"
                :key="'col' + indexs"
              >
                <div class="rSimg1">
                  <img src="@/assets/image/kangfu/rectangle@2x.png" alt="" />
                </div>
                <div style="margin-left: 16px">
                  <span class="rSsapn1"
                    ><a href="organizationDetails?id=1">{{
                      item.name
                    }}</a></span
                  >
                  <span class="rSsapn2"
                    ><a-icon type="phone" />&nbsp;&nbsp;{{ item.content }}</span
                  >
                  <span class="rSsapn3"
                    ><a-icon type="environment" />&nbsp;&nbsp;{{
                      item.place
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          左右切换按钮
          <div
            v-if="recommedList.list && recommedList.list.length > 6"
            style="width: 68px; margin: 0 auto; display: flex"
          >
            <div
              class="oDleft"
              style="flex: 1"
              @click="onSwiperTab(-1)"
              v-if="swiperIndex > -1"
            >
              <a><img src="@/assets/image/kangfu/arrowleft.png" alt="" /></a>
            </div>
            <div
              class="oDright"
              @click="onSwiperTab(1)"
              v-if="(swiperIndex) => 5"
            >
              <a><img src="@/assets/image/kangfu/arrowright.png" alt="" /></a>
            </div>
          </div>
        </div>-->
      </div>
      <!-- 机构查询结束 -->
      <div class="apply">
        <!-- 标签标题 -->
        <div class="dlex1-div" style="margin-top: 50px; margin-bottom: 14px">
          <div class="navTitle" style="flex: 1">
            <p class="titleName">知识问答</p>
            <p class="titleenglish">KNOWLEDGE Q & A</p>
          </div>
          <div class="cOicon-id" style="width: 335px">
            <a-input
              style="width: 250px; height: 38px !important"
              v-model="msgons"
              placeholder="请输入关键字"
              class="searchInput"
            />
            <div
              class="searchIcon"
              style="padding: 10px; height: auto; width: auto"
              @click="search()"
            >
              <img src="@/assets/image/icon1.png" alt="" />
              <span>搜索</span>
            </div>
          </div>
        </div>
        <div
          class="listDiv2 knowledges"
          v-for="(item, index) in KnowledgeList"
          :key="index + 'sa'"
        >
          <li>
            <div class="dlex2-div title">
              <div v-show="item.category != null" class="titlenav">
                <div>{{ item.category }}</div>
              </div>
              <p class="innertext">
                {{ item.title }}
              </p>
            </div>
            <div class="knowcontent">
              <div
                class="innercontent"
                :class="!item.checked ? '' : 'contentactive'"
                v-html="item.content"
              ></div>
              <div class="dlex2-div">
                <div style="flex: 1">
                  <span class="titleTxt7"> 来源：{{ item.source }} </span>
                </div>
                <div v-if="item.content.length > 230">
                  <div class="show" v-if="!item.checked" @click="show(index)">
                    <p>阅读全文</p>
                    <img src="@/assets/image/employment/bottom.png" alt="" />
                  </div>
                  <div class="show" v-if="item.checked" @click="show(index)">
                    <p>收起</p>
                    <img src="@/assets/image/employment/top.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </div>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 50px auto"
          v-if="KnowledgeList.length < 1 && flag"
        />
      </div>
      <div class="cnBottom" v-if="KnowledgeList.length > 0">
        <div style="margin: 0 auto; width: 230px">
          <a-button @click="more()" v-show="btnState == 1" class="sobtn"
            >点击加载更多</a-button
          >
          <a-button v-show="btnState == 2" :loading="true" class="sobtn"
            >正在加载中</a-button
          >
          <span style="text-align: center" class="timeTxt1" v-if="btnState == 3"
            >没有更多了</span
          >
        </div>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
    <!-- Footer部分结束 -->
    <!-- 弹窗 -->
    <!-- <a-modal
      title="企业入驻"
      closeIcon="x"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <Settled @childFn="parentFn" />
    </a-modal> -->
  </div>
</template>



<script>
export default {
  // components: { Settled },
  data() {
    return {
      btnState: 1,
      msgons: "",
      // 康复科普列表
      SpreadList: [],
      // 知识问答列表
      KnowledgeList: [],
      // 总数
      total: 0,
      // 页码
      pageIndex: 1,
      pageSize: 10,
      pagesize: 6,
      pageindex: 1,
      // 省
      province: "",
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      // pictureUrl: config.pictureUrl,
      loading: false,
      flag: false,
      // dataList,
      //弹窗
      visible: false,
      confirmLoading: false,
      value: 1,
      ModalText: "Content of the modal",
      trainList: [],
      //轮播
      swiperIndex: 0,
      bannerList: [],
      cattegoryIndex: "",
      rehabilitationList: [],
      size: 0,
      // 机构列表
      recommedList: {},
      // 省数据
      cityList: [],
      onLoading: false,
    };
  },
  created() {
    this.getSpreadList();
    this.getKnowledgeList();
    this.getCityList();
    this.professional();
  },
  methods: {
    // 跳转列表页
    goMallList(e) {
      if (e == 1) {
        this.$router.push("/service/recoveryList");
      } else {
        this.$router.push("/service/mechanismList");
      }
    },
    // 跳转详情页
    goDetail(id, type) {
      this.$router.push("/details/details?id=" + id + "&from=4&type=" + type);
    },
    // 获取城市-省数据
    getCityList() {
      this.$ajax({
        url: "/news/provinceCity/list/province",
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },

    // 机构 - 列表
    professional() {
      let ber = [];
      this.$ajax({
        url:
          "/entrepreneurial/cominfo/institution/list?pageSize=" +
          9 +
          "&pageIndex=" +
          1,
        method: "post",
        params: {
          //分页开区间开大闭小 : 9,
          //分页闭区间 : this.pageIndex,
        },
      }).then((res) => {
        if (res.code == 200) {
          ber = res.data.list;
          for (var i in ber) {
            this.trainList.push(ber[i]);
          }
          if (ber.length <= 8) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.trainList = [];
          this.btnState = 3;
        }
      });
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.pageIndex == 1;
        this.KnowledgeList = [];
        this.getKnowledgeList();
      }
    },
    search() {
      this.KnowledgeList = [];
      this.getKnowledgeList();
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getKnowledgeList(this.pageIndex);
    },
    // 获取康复科普列表
    getSpreadList(e) {
      this.$ajax({
        url: "/news/healthspread/list?pageSize=6&pageIndex=1",
        method: "post",
        dataType: "JSON",
        params: {},
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.SpreadList = res.data.list;
        }
      });
    },
    // 知识问答列表
    getKnowledgeList() {
      this.onLoading = true;
      let ber = [];
      this.$ajax({
        url:
          "/news/knowqa/qaList?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        dataType: "JSON",
        params: {
          localtion: 2,
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          ber = res.data.list;
          for (var i in ber) {
            this.KnowledgeList.push(ber[i]);
          }
          // 为每个元素添加flag
          this.KnowledgeList.forEach((value, index) => {
            this.$set(value, "checked", false);
          });
        } else {
          this.onLoading = false;
        }
        // 判断查询数据的长度
        if (this.pageIndex >= res.data.totalPage) {
          this.btnState = 3;
        } else {
          this.btnState = 1;
        }
      });
    },
    // 康复服务切换
    callback(key) {
      // console.log(key);
      this.rehabilitationList = [];
      this.cattegoryIndex = key;
      this.getService();
    },
    handleChange(e) {
      this.province = e;
    },
    //弹框显示隐藏
    showModal() {
      this.visible = true;
    },
    show(e) {
      this.KnowledgeList[e].checked = !this.KnowledgeList[e].checked;
      // console.log(this.KnowledgeList[e].checked, e);
      // console.log(this.KnowledgeList);
    },
    //轮播
    onSwiperTab(e) {
      if (this.recommedList.totalCount > this.pagesize) {
        let i = this.pageindex + e;
        // console.log(i);
        if (i == 0) {
          i =
            this.recommedList.totalCount / this.pagesize +
            (this.recommedList.totalCount % this.pagesize > 0 ? 1 : 0);
        } else if (
          i >
          this.recommedList.totalCount / this.pagesize +
            (this.recommedList.totalCount % this.pagesize > 0 ? 1 : 0)
        ) {
          i = 1;
        }
        this.pageindex = i;
      }
    },

    handleCancel(e) {
      // console.log("Clicked cancel button");
      this.visible = false;
    },
    handleMenuClick(e) {
      return e;
      // console.log("click", e);
    },
    // 函数体结束
  },
};
</script>
// js代码结束


// 样式
<style lang="less" scoped>
.blacktxt {
  color: #333333;
  font-weight: bold;
  margin-bottom: 8px;
  span {
    color: #333333;
  }
}
.smallPrint {
  display: flex;
  align-items: center;
  img {
    float: right;
    width: 10px !important;
    height: 10px !important;
  }
}
.contentactive {
  -webkit-line-clamp: 10000;
}
/* For demo */
.ant-carousel {
  .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
}
.topImg {
  max-width: 100% !important;
  // min-height:800px;
  max-height: 693px;
  overflow: hidden;
  div {
    width: 100%;
    max-height: 693px;
    z-index: 0;
    position: absolute;
    filter: blur(10px);
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 800px;
    z-index: 1;
    position: relative;
  }
}
// 轮播
// Heade样式结束
// conenr开始

.big-Picture {
  width: 100%;
  margin: 0 auto;
  #bigImg {
    img {
      width: 100%;
      height: 100%;
    }
  }
}

///
.recoveryOF-n {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  .rehabiliPopulariList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .rStext1 {
    margin-left: 20px;
    &:first-child {
      margin-left: 0px;
    }
  }
  .wenzi {
    width: 590px;
    background-color: #fff;
    padding: 24px;
    margin-top: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .txt5 {
    width: 336px;
    display: block;
    font-family: "苹方-简 中黑体";
    font-weight: bolder;
    // overflow-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    transition: color 0.3s linear;
    padding-bottom: 2px;
  }
  // .txt5:hover {
  //   color: #eeb336;
  // }
  .word17 {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 14px;
    margin-top: 16px;
    display: block;
    height: 14px;
    transition: color 0.3s linear;
  }
  // .word17:hover {
  //   color: #eeb336;
  // }
}

///-------------分割------线
.mechanismQuery {
  width: 1200px;
  margin: 0 auto;
  .button-Cs {
    width: 100%;
    height: 40px;
  }
}

.m-Query {
  width: 100%;
  height: 60px;
  background-color: #f8f8fa;
  margin-top: 30px;
  // display: none;
}
.m-Query-a {
  margin-left: 46px;
  margin-top: 1%;
}
.m-Query-c {
  width: 100px;
  height: 40px;
  background: rgb(223, 18, 18);
  margin: 0 auto;
  margin-top: 10px;
}
.m-Query-b {
  width: 188px;
  height: 80px;
  background: rgb(223, 18, 18);
  margin: 0 auto;
}
.mqImg {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  overflow: hidden;
  display: none;
  .swtdiv {
    width: 9000px;
    transition: all 0.5s;
    padding-bottom: 30px;
    overflow: hidden;
    .recommedList {
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      .loop {
        width: 400px;
        align-items: flex-start;
        display: flex;
        border-bottom: #dedede solid 1px;
        padding: 16px 0px;
        .rSimg1 {
          width: 136px;
          overflow: hidden;
          height: 91px;
          img {
            height: 91px;
            width: 100%;
          }
        }
        .rightcontent {
          width: 264px;
          padding: 0 16px;
        }
      }
    }
    .rSwdiv {
      width: 406px;
      float: left;
      transition: all 0.5s;

      .loop {
        align-items: flex-start;
        display: flex;
        border-bottom: #dedede solid 1px;
        padding: 16px 0px;
      }
    }
  }

  .rSsapn1 {
    display: block;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    margin-top: 13px;
    a {
      display: inline-block;
      width: 232px;
      color: #333333;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .rSsapn2 {
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    margin-top: 16px;
    text-align: left;
  }
  .rSsapn3 {
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    margin-top: 10px;
    text-align: left;
  }
}
.apply {
  width: 1200px;
  // height: 300px;
  margin-top: 30px;
  margin: 0 auto;
}
//左右切换按钮
.oDleft,
.oDright {
  // background-color: #f5f5f5;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background-color: #b9b5b5;
  cursor: pointer;
  padding: 1px 0px;
  a {
    img {
      width: 7px;
      height: 13px;
    }
  }
}
.oDright {
  right: 0;
  padding-left: 2px;
}
.oDleft {
  margin-right: 24px;
  padding-right: 2px;
}
.oDleft:hover {
  background-color: #fb6d00 !important;
}
.oDright:hover {
  background-color: #fb6d00 !important;
}
.yuan {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #fb6d00;
}
.listDiv2 {
  width: 100%;
  padding: 24px;
  overflow: hidden;
  background-color: #ffffff;
  margin-top: 16px;
  p {
    font-size: 15px;
    font-family: PingFang SC;
    color: #666666;
    line-height: 28px;
  }
}
.knowledges {
  margin-top: 30px;
  li {
    .title {
      display: flex;
      .identification {
        font-size: 53px;
        line-height: 20px;
        color: #fb6d00;
        margin-right: 10px;
      }
      .innertext {
        color: #333333;
        font-size: 18px;
        line-height: 25px;
        font-weight: bold;
      }
    }
    .knowcontent {
      position: relative;
      margin-top: 22px;
      .dlex2-div {
        margin-top: 17px;
        padding-top: 17px;
        border-top: 1px solid #eeeeee;
        width: 100%;
        .titleTxt7 {
          display: inline-block;
        }
      }
      .innercontent {
        color: #333333;
        font-size: 15px;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /*行数*/
        -webkit-box-orient: vertical;
      }
      .contentactive {
        -webkit-line-clamp: 10000;
      }
      .show {
        padding-left: 25px;
        bottom: 3px;
        background: #ffffff;
        display: flex;
        cursor: pointer;
        p {
          color: #0d4fae;
          font-size: 15px;
          line-height: 21px;
        }
        img {
          width: 20px;
          margin-left: 4px;
        }
      }
    }
  }
}

//
.listDiv1 {
  width: 386px;
  background: #ffffff;
  padding: 20px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.listDiv1:nth-child(3n-2) {
  margin-left: 0px;
}
.dlex2-div {
  margin-top: 8px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 16px;
  }
  span {
    font-size: 15px;
    font-family: PingFang SC;
    color: #999999;
    display: inline-block;
  }
}
.coRsingleCF {
  margin-top: 30px;
}

.titleTxt6 {
  margin-top: 16px;
  -webkit-line-clamp: 2;
  margin-bottom: 6px;
  span {
    font-size: 16px;
    font-family: PingFang SC;
    line-height: 24px;
    color: #666666;
  }
  p {
    font-size: 16px;
    font-family: PingFang SC;
    line-height: 24px;
    color: #666666;
  }
}
.lineSingle {
  width: 500px;
}
.titleTxt1 {
  font-weight: 600;
  display: block;
  margin-bottom: 18px;
}
</style>


